Try to map CSS properties such as color only once. If updates to that property are needed, those should be done by updating the local variable.
Set the value equal to local variable: color: var(--pfe-local--Color);. Note that no fallback is defined at this level as that is done when the local variable is declared.
In the pfe-component, do not set value of the broadcasted variables unless the component is influencing the background color; instead, set local variables to look for the value of a broadcasted variable, followed by a fallback color. This provides a hook for containers to influence the color of the typography in the component so that it remains readable.
- --pfe-local--Color: var(--pfe-broadcasted--text, #444);
- If a component sets it's own background color, it can and should update the value of the broadcasted variables.
Reset local variable values as needed for attribute overrides.

CSS Example

Let's use the pfe-cta as an example. We can start by defining local variables, namespaced for this component, and then updating the values of those variables as we go.

    // 1. set up local vars equal to theme vars & fallbacks
    :host {
      --pfe-cta--Color: var(theme--link, #06c);
    }

    // 2. Use color property once, map to local var value
    :host(:not([priority]) {
      ::slotted(a) {
         // color: blue; CSS compiler will print this for IE11
         color: var(--pfe-cta--Color, blue) !important;
      }
    }

    // 3. Use broadcasted variables as needed, with theme fallback after other declarations
    :host {
      --pfe-cta--Color: var(broadcasted--link, var(theme--link, #06c));   
    }

    // 4. Override broadcasted last
    :host([color="accent"]) {
      --pfe-cta--BackgroundColor: var(theme--surface--accent);
      --pfe-cta--Color: var(theme--surface-accent--link);
    }

Typography Classes

There are a variety of mixins, extends, and variables available in pfe-sass. We recommend checking out the sass doc for extensive information about how to use these tools.

There are already utility / modifier classes available within pfe-typography-classes.css for use within long form content. However if you need custom classes, you can utilize either the placeholders, or the pfe-typography mixin.

Text class examples

.custom-text--foo {
  @extend %pfe-text--lg;
}
.custom-text--bar {
 @include pfe-typography(lg, $type: "text"); 
}
.custom-text--baz {
 @include pfe-typography(lg, $type: "text", $base: true); 
}

.custom-text--foo {
  font-size: 1.125rem;
  font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
  line-height: 1.5;
  line-height: var(--pfe-theme--line-height, 1.5);
  font-weight: 400;
  font-weight: var(--pfe-theme--font-weight--normal, 400);
}

.custom-text--foo:not(:last-child):not(:empty) {
  margin-bottom: 0.5rem;
  margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
}

.custom-text--bar {
  font-size: 1.125rem;
  font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
  line-height: 1.5;
  line-height: var(--pfe-theme--line-height, 1.5);
  font-weight: 400;
  font-weight: var(--pfe-theme--font-weight--normal, 400);
}

.custom-text--bar:not(:last-child):not(:empty) {
  margin-bottom: 0.5rem;
  margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
}

.custom-text--baz {
  font-size: 1.125rem;
  font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
  line-height: 1.5;
  line-height: var(--pfe-theme--line-height, 1.5);
  font-weight: 400;
  font-weight: var(--pfe-theme--font-weight--normal, 400);
}

.custom-text--baz:not(:last-child):not(:empty) {
  margin-bottom: 0.5rem;
  margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
}

Title examples

Note that you can opt in or out out of properties beyond the font-family and font-size if desired, via the argument: $base: false and/or $spacing: false.

.custom-title--foo {
  @extend %pfe-title--lg;
}
.custom-title--bar {
 @include pfe-typography(lg, $type: "title"); 
}
.custom-title--baz {
 @include pfe-typography(lg, $type: "title", $base: false); 
}

.custom-title--foo {
  font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
  font-size: 1.125rem;
  font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  line-height: 1.5;
  line-height: var(--pfe-theme--line-height, 1.5);
  font-weight: 400;
  font-weight: var(--pfe-theme--font-weight--normal, 400);
}

.custom-title--foo:not(:last-child) {
  margin-bottom: 1rem;
  margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);
}

.custom-title--bar {
  font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
  font-size: 1.125rem;
  font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  line-height: 1.5;
  line-height: var(--pfe-theme--line-height, 1.5);
  font-weight: 400;
  font-weight: var(--pfe-theme--font-weight--normal, 400);
}

.custom-title--bar:not(:last-child) {
  margin-bottom: 1rem;
  margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);
}

.custom-title--baz {
  font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
  font-size: 1.125rem;
  font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
}

Component examples

:host[foo] {
  font-size: pfe-local(FontSize);
}

:host[bar] {
  @include pfe-c-typography($type: text, $sizing: md);
}

:host[baz] {
  @include pfe-c-typography($type: text, $sizing: md, $base: true, $spacing: true, $light-dom-heading:true);
}

:host[foo] {
  font-size: 1rem;
  font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
}

:host[bar] {
  font-size: 1rem;
  font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
}

:host[baz] {
  font-size: 1rem;
  font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
  font-family: var(--pfe-clipboard--LineHeight, var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif));
  line-height: 1.5;
  line-height: var(--pfe-clipboard--LineHeight, var(--pfe-theme--line-height, 1.5));
  font-weight: 400;
  font-weight: var(--pfe-clipboard--FontWeight, var(--pfe-theme--font-weight--normal, 400));
  --pf-c--FontSize: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
}

:host[baz]:not(:last-child) {
  margin-bottom: 0.5rem;
  margin-bottom: var(--pfe-clipboard--MarginBottom, var(--pfe-theme--content-spacer--body--sm, 0.5rem));
}

Keywords

FAQs

What is @patternfly/pfe-sass?

Is @patternfly/pfe-sass well maintained?

Package last updated on 01 Feb 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install